﻿var app = new Vue({
    el: '#app',
    data: {
        loading: false,
        editing: false,
        Index:0,
        productModel: {
            id: 0,
            name: "axb",
            description: "az",
            value: 1.99
        },
        products:[]
    },
    mounted(){
        this.getProducts();
    },
    methods: {
        getProduct(id) {
            this.loading = true;
            axios.get('/API/product/' + id)
                .then(res => {
                    var product = res.data
                    this.productModel = {
                        id: product.id,
                        name: product.name,
                        description: product.description,
                        value: product.value
                    }
                })
                .catch(err => {
                    console.log(err);
                })
                .then(() => {
                    this.loading = false;
                })
        },
        getProducts() {
            this.loading = true;
            axios.get('/API/product')
                .then(res => {
                    this.products = res.data
                })
                .catch(err => {
                    console.log(err);
                })
                .then(() => {
                    this.loading = false;
                })
        },
        createProduct() {
            this.loading = true;
            console.log(this.productModel)
            axios.post('/API/product', this.productModel)
                .then(res => {
                    this.products.push(res.data)
                })
                .catch(err => {
                    console.log(err);
                })
                .then(() => {
                    this.loading = false;
                    this.editing = false;
                })
        },
        updateProduct() {
            this.loading = true;
            axios.put('/API/product', this.productModel)
                .then(res => {
                    this.products.splice(this.index,1,res.data)
                })
                .catch(err => {
                    console.log(err);
                })
                .then(() => {
                    this.loading = false;
                    this.editing = false;
                })
        },
        Cancel() {
            this.editing = false;
        },
        newProduct() {
            this.editing = true;
            this.productModel.id = 0;
        },
        editProduct(id, index) {
            this.index = index;
            this.getProduct(id);
            this.editing = true;
        },
        deleteProduct(id,index) {
            this.loading = true;
            axios.delete('/API/product/' + id)
                .then(res => {
                    this.products.splice(index,1)
                })
                .catch(err => {
                    console.log(err);
                })
                .then(() => {
                    this.loading = false;
                })
        },
    },
    computed: {
    }
})